<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>login</title>
	<script>
		var bool_uname = false;
		var bool_pwd = false;
		
        function tip_name() {
            div_uname.innerHTML = "请输入4~10位"
        }
        function tip_pwd() {
            div_upwd.innerHTML = "请输入6位密码"
        }
        function check_name() {
            var namelength = uname.value.length;
            bool_uname = false;
            if(namelength >= 4 && namelength <=10){
                div_uname.innerHTML = "用户名正确"
                bool_uname = true;
            }else{
                div_uname.innerHTML = "用户名错误"
            }
            
        }
        function check_pwd() {
            var upwdlength = upwd.value.length;
            bool_pwd = false;
           if(upwdlength == 6){
                div_upwd.innerHTML = "密码正确"
               bool_pwd = true;
            }else{
                div_upwd.innerHTML = "密码错误"
            }

        }
        
		function login() {
			if(bool_uname && bool_pwd){
				//1.创建异步对象
				var xhr = new XMLHttpRequest();
				//4.监听,接收响应
				xhr.onreadystatechange = function () {
					if(xhr.status == 200 && xhr.readyState == 4){
					    var reslut = xhr.responseText;
					    if(reslut == 1){
					        alert("登录成功")
						    location.href = "http://localhost:8080/user_list.html"
					    }else {
                            alert("登录失败")
					    }
					}
                }
                //2.创建请求
				var url = "http://localhost:8080/user/v1/login/" + uname.value + "&" +upwd.value;
				xhr.open("get",url,true);
				//3.发送请求
				xhr.send();
    
    
			}else {
			    alert("请输入用户名或密码");
			}
        }
        
	</script>
</head>
<body>

<fieldset>
	<legend>用户登录</legend>
	<p>
		姓名<input type="text" id="uname" onfocus="tip_name()" onblur="check_name()">
		<span id="div_uname"></span>
	</p>
	<p>
		密码<input type="text" id="upwd" onfocus="tip_pwd()" onblur="check_pwd()">
		<span id="div_upwd"></span>
	</p>
	<button onclick="login()">登录</button>
</fieldset>



</body>
</html>